<template>
    <div class="category-wrapper">
        <div class="category-content">
            <Icon name="category"></Icon>
            <label :for="type === '-' ? 'outcome-category' : 'income-category'">类别</label>
            <div class="select-wrapper">
                <Icon name="right-pointer"></Icon>
                <select v-if="type === '-'" name="outcome-category" id="outcome-category" v-model="selected">
                    <option v-for="option in outcomeCategories" :value="option" :key="option">{{option}}</option>
                </select>
                <select v-else name="income-category" id="income-category" v-model = "selected">
                    <option v-for="option in incomeCategories" :value="option" :key="option">{{option}}</option>
                </select>
                <Icon name="left-pointer"></Icon>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {Component, Prop, Watch} from 'vue-property-decorator';

    @Component({

    })
    export default class Category extends Vue {
        name = 'Category';

        @Prop(String) type: string | undefined;

        outcomeCategories = ['衣服饰品', '食品酒水', '居家物业', '行车交通', '交流通讯', '休闲娱乐', '学习进修', '人情往来', '医疗保健', '金融保险', '其他支出']
        incomeCategories = ['工资收入', '加班收入', '投资收入', '兼职收入', '红包收入', '意外收入', '其他收入']
        selected = (this.type === '-') ? this.outcomeCategories[0] : this.incomeCategories[0];

        @Watch('selected')
        onSelectedChanged() {
            this.$emit('update:category', this.selected);
        }

        @Watch('type')
        onTypeChanged() {
            this.selected = (this.type === '-') ? this.outcomeCategories[0] : this.incomeCategories[0];
        }

        mounted() {
            this.$emit('update:category', this.selected);
        }
    }
</script>

<style lang="scss" scoped>
    @import "~@/assets/style/helper.scss";

    .category-wrapper {
        @extend %tally-text-wrapper;

        > .category-content {
            @extend %tally-text-content;

            > label {
                font-weight: bold;
                color: $color-gray;
            }

            > .select-wrapper {
                display: flex;
                width: 70vw;
                justify-content: center;

                > .icon {
                    margin: auto 40px;
                }

                > select {
                    appearance: none;
                    border: none;
                    color: $color-orange;
                    font-size: 1.2em;
                    text-align: center;
                    text-align-last: center;
                    /*text-indent: 33%;*/
                    flex-grow: 1;
                    background: white;
                }
            }
        }
    }

    .icon {
        @extend %svg-theme-color;
    }
</style>